<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <p>doubleCount:{{ $store.getters.doubleCount }}</p>
    <p>doubleCount:{{ abc }}</p>
    <button @click="increment">累加count</button>
    <button @click="incrementN({ n: 5 })">累加N count</button>
    <button @click="decrement">累减count</button>
    <button @click="incrementWait">等一等累加count</button>
    <button @click="incrementNWait(5)">等一等累加count</button>
  </div>
</template>

<script>
import { mapState, mapMutations ,mapActions,mapGetters} from "vuex";
/* import store from "./stores";
console.log(store); */
export default {
  name: "App",
  mounted() {
    console.log(this, "app");
    
  },
    /* 
    辅助函数的参数除了数组以外,还可以是一个对象
    因为如果用数组的话,生成的函数名或者计算属性等名称和vuex的值的名称一致
    有的时候,为了防止命名冲突,我们可以选择使用对象写法,对象的key就是在组件中的命名,对象value就是在vuex中的命名
  */
  computed: {
    ...mapState(["count", "num"]),
    //.....
    ...mapGetters({abc:"douleCount"})
  },
  methods: {
    // ...mapMutations(["increment", "decrement", "incrementN", "incrementWait"]),
    ...mapMutations({increment: "increment",
      decrement: "decrement",
      incrementN: "incrementN",
      incrementWait:"incrementWait"
    }),
    ...mapActions(["incrementNWait"])
  },
};
</script>

<style></style>